<!DOCTYPE html>
<html>
<head>
<title>LLPicker</title>
<meta charset="utf-8">
<!--script src="http://weapp.googlecode.com/svn/api/weapp.min.js"></script-->
<script src="../../WeApp.js"></script>

<style type="text/css">
body {
    font-size: smaller;
}
label:hover {
    cursor: pointer;
    text-decoration: underline;
}
#lonlat {
    margin-top: 5px;
    width: 100%;
    border: solid 1px gray;
}
p {
    padding: 0px;
    margin: 0px;
    text-align: center;
}
#locate {
    margin-top: 10px;
    cursor: pointer;
    width: 150px;
}

</style>

<script>
LLPicker = top.Weiran.Class(WeApp, {
    dictionaries: {
        'en': {
            'fromMap': 'Get a LonLat by clicking map',
            'toMap': 'Put a LonLat to locate on map',
            'locate': 'Locate this LonLat'
        },
        'zh-CN' : {
            'fromMap': '点击地图获取经纬度',
            'toMap': '输入经纬度并在地图上显示',
            'locate': '定位此坐标'
        }
    },
    
    // OpenLayers.Layer.Vector
    layer: null,

    initialize: function (options) {
        WeApp.prototype.initialize.apply(this, arguments);
        
        top.jQuery('#fromLabel', document).text(this.i18n('fromMap'));
        top.jQuery('#toLabel', document).text(this.i18n('toMap'));
        top.jQuery('#locate', document).val(this.i18n('locate'));
    },

    run: function () {
        WeApp.prototype.run.apply(this, arguments);
        
        // add a layer
        this.layer = new top.OpenLayers.Layer.Vector(this.getTitle());
        this.getMap().addLayer(this.layer);
        
        // add dom event handlers
        top.jQuery('#fromMap', document).change(top.Weiran.Function.bind(this.onFromMap, this));
        top.jQuery('#toMap', document).change(top.Weiran.Function.bind(this.onToMap, this));
        top.jQuery('#locate', document).click(top.Weiran.Function.bind(this.onLocate, this));
        
        this.onFromMap();
    },
    
    onFromMap: function(evt) {
        if (top.jQuery('#fromMap', document).attr('checked')) {
            // disable to map method
            top.jQuery('#lonlat', document).attr('readonly', 'readonly');
            top.jQuery('#locate', document).attr('disabled', 'disabled');
            // enable from map method
            this.getMap().events.register('click', this, this.onPick);
            this.getMap().viewPortDiv.style.cursor = 'crosshair';
            this.layer.removeAllFeatures();
        }
    },
    
    onToMap: function(evt) {
        if (top.jQuery('#toMap', document).attr('checked')) {
            // enable to map method
            top.jQuery('#lonlat', document).removeAttr('readonly');
            top.jQuery('#locate', document).removeAttr('disabled');
            // disable from map method
            this.getMap().events.unregister('click', this, this.onPick);
            this.getMap().viewPortDiv.style.cursor = 'default';
            this.layer.removeAllFeatures();
        }
    },
    
    onLocate: function(evt) {
        var ll = top.OpenLayers.LonLat.fromString(
            top.jQuery('#lonlat', document).val()
        ).transform(
            this.getMap().displayProjection,
            this.getMap().getProjectionObject()
        );
        
        this.layer.removeAllFeatures();
        this.layer.addFeatures([
            new top.OpenLayers.Feature.Vector(
                new top.OpenLayers.Geometry.Point(ll.lon, ll.lat), {}, {
                    graphicName: "cross",
                    strokeColor: "red",
                    strokeWidth: 2,
                    fillOpacity: 0,
                    pointRadius: 10
                }
            )
        ]);
        
        this.getMap().setCenter(ll);
    },
    
    onPick: function(e) {
        if (!this.theWin.isSelected()) {
            return;
        }
        var map = this.getMap();
        var ll1 = map.getLonLatFromPixel(e.xy);
        var ll2 = ll1.clone();
        var ll1 = ll1.transform(map.getProjectionObject(), map.displayProjection);
        top.jQuery('#lonlat', document).val(ll1.lon.toFixed(6) + ', ' + ll1.lat.toFixed(6));
        
        this.layer.removeAllFeatures();
        this.layer.addFeatures([
            new top.OpenLayers.Feature.Vector(
                new top.OpenLayers.Geometry.Point(ll2.lon, ll2.lat), {}, {
                    graphicName: "cross",
                    strokeColor: "red",
                    strokeWidth: 2,
                    fillOpacity: 0,
                    pointRadius: 10
                }
            )
        ]);
    },

    destroy: function () {
        this.getMap().removeLayer(this.layer);
        this.layer.destroy();
        this.layer = null;
        
        // clear the click handler
        this.getMap().events.unregister('click', this, this.onPick);
        // reset map cursor to default
        this.getMap().viewPortDiv.style.cursor = 'default';
        WeApp.prototype.destroy.apply(this, arguments);
    },
    
    // This event is fired when the window is selected.
    onSelect: function() {
        WeApp.prototype.onSelect.apply(this, arguments);
        
        if (top.jQuery('#fromMap', document).attr('checked')) {
            // enable from map method
            this.getMap().viewPortDiv.style.cursor = 'crosshair';
        }
    },
    
    // This event is fired when the window is deselected.
    onDeselect: function() {
        WeApp.prototype.onDeselect.apply(this, arguments);
        
        if (top.jQuery('#fromMap', document).attr('checked')) {
            // disable from map method
            this.getMap().viewPortDiv.style.cursor = 'default';
        }
    },
    
    onIconize: function() {
        WeApp.prototype.onIconize.apply(this, arguments);
        
        if (top.jQuery('#fromMap', document).attr('checked')) {
            // disable from map method
            this.getMap().viewPortDiv.style.cursor = 'default';
        }
    },

    CLASS_NAME: "LLPicker"
});

function main(options) {
    var app = new LLPicker(options);
    app.run();
}
</script>
</head>

<body>
        <input type='radio' name='method' id='fromMap' checked='checked' />
        <label for='fromMap' id='fromLabel'>From map</label>
        <br />
        <input type='radio' name='method' id='toMap' />
        <label for='toMap' id='toLabel'>To map</label>
        <br />
        <input type='text' id='lonlat' value="0.000000, 0.000000" readonly='readonly' />
        <p><input type='button' id='locate' value='Locate' disabled='disabled' /></p>
</body>
</html>
